<template>
<el-dialog
  :title="'Staff Information'"
  :visible.sync="dialogVisible"
  width="100%"
  :fullscreen="true"
  :before-close="handleClose">
  <div class="xlSeeFrom" v-if="dialogVisible">
    <div class="tab-item">
      <div class="item">
        <p class="tab-title">Basic Information</p>
        <div class="tab">
          <table>
            <tr>
              <td>Name</td>
              <td>UserName</td>
              <td>PE Number</td>
              <td>Email</td>
              <td>Address</td>
            </tr>
            <tr>
              <td>{{form.pe_name}}</td>
              <td>{{form.username}}</td>
              <td>{{form.pe_number}}</td>
              <td>{{form.email}}</td>
              <td>{{form.home_address}}</td>
            </tr>
            <tr>
              <td>Country</td>
              <td>Dept</td>
              <td>Leader</td>
              <td>Position</td>
              <td>Rank</td>
            </tr>
            <tr>
              <td>{{form.country}}</td>
              <td>{{form.dept_name}}</td>
              <td>{{form.leader_name}}</td>
              <td>{{form.position}}</td>
              <td>{{form.rank}}</td>
            </tr>
            <tr>
              <td>Work Site</td>
              <td>Education</td>
              <td>Graduate School</td>
              <td>Graduate Time</td>
              <td>Entry Time</td>
            </tr>
            <tr>
              <td>{{form.work_site}}</td>
              <td>{{form.education}}</td>
              <td>{{form.graduate_from}}</td>
              <td>{{form.graduate_time}}</td>
              <td>{{form.entry_time}}</td>
            </tr>
            <tr>
              <td>Probation Time</td>
              <td>Probation End Time</td>
            </tr>
            <tr>
              <td>{{form.probation_time}}</td>
              <td>{{form.probation_end_time}}</td>

            </tr>
          </table>
        </div>
      </div>

      <!--维护信息-->
      <div class="item">
        <p class="tab-title">Maintenance Information</p>
        <div class="tab">
          <table>
            <tr>
              <td>Probation Salary</td>
              <td>Contract Currency</td>
              <td>Payment Currency</td>
              <td>Tax Rate</td>
              <td>Tax Number</td>
            </tr>
            <tr>
              <td><el-input v-model="form.probation_salary" placeholder="Probation Salary"></el-input></td>
              <td>
                <el-select v-model="form.contract_currency" placeholder="please select contract currency" style="width:100%">
                  <el-option label="UAH" value="UAH"></el-option>
                  <el-option label="CNY" value="CNY"></el-option>
                  <el-option label="USD" value="USD"></el-option>
                  <el-option label="EUR" value="EUR"></el-option>
                </el-select>
              </td>
              <td>
                <el-select v-model="form.payment_currency" placeholder="please select payment currency" style="width:100%">
                  <el-option label="UAH" value="UAH"></el-option>
                  <el-option label="CNY" value="CNY"></el-option>
                  <el-option label="USD" value="USD"></el-option>
                  <el-option label="EUR" value="EUR"></el-option>
                </el-select>
              </td>
              <td><el-input v-model="form.tax_rate" placeholder="Tax Rate"></el-input></td>
              <td><el-input v-model="form.tax_number" placeholder="Tax Number"></el-input></td>
            </tr>
            <tr>
              <td>Private Email</td>
              <td>Bank Account Number</td>
              <td>Bank Name</td>
              <td>Bank Address</td>
              <td>Swift</td>
            </tr>
            <tr>
              <td><el-input v-model="form.private_email" placeholder="Private E-mail"></el-input></td>
              <td><el-input v-model="form.bank_account_number" placeholder="Bank Account"></el-input></td>
              <td><el-input v-model="form.bank_name" placeholder="Bank Name"></el-input></td>
              <td><el-input v-model="form.bank_address" placeholder="Bank Address"></el-input></td>
              <td><el-input v-model="form.swift" placeholder="Bank Address"></el-input></td>
            </tr>
            <tr>
              <td>Annual_leave Used</td>
              <td>Annual_leave Remain</td>
              <td>Sick_leave Used</td>
              <td>Sick_leave Remain</td>
              <td>Social Security Type</td>
            </tr>
            <tr>
              <td><el-input v-model="form.annual_leave_used" placeholder="Annual_leave Used"></el-input></td>
              <td><el-input v-model="form.annual_leave_remain" placeholder="Annual_leave Remain"></el-input></td>
              <td><el-input v-model="form.sick_leave_used" placeholder="Sick_leave Used"></el-input></td>
              <td><el-input v-model="form.sick_leave_remain" placeholder="Sick_leave Remain"></el-input></td>
              <td><el-input v-model="form.social_security_type" placeholder="Social Security Type"></el-input></td>
            </tr>
            <tr>
              <td>Social Security Money</td>
              <td>Social Security Start Time</td>
              <td>Name of services</td>
              <td>Registered Address</td>
              <td>Registered Deadline Time</td>
            </tr>
            <tr>
              <td><el-input v-model="form.social_security_money" placeholder="Social Security Money"></el-input></td>
              <td>
                <el-date-picker
                  v-model="form.social_security_start_time"
                  type="date"
                  placeholder="start time"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width:100%">
                </el-date-picker>
              </td>
              <td><el-input v-model="form.name_of_service" placeholder="Name of services"></el-input></td>
              <td><el-input v-model="form.registered_address" placeholder="Registered Address"></el-input></td>
              <td><el-input v-model="form.registered_deadline_date" placeholder="Registered Deadline Time"></el-input></td>
            </tr>
            <tr>
              <td>Phone Number</td>
              <td>Attachment</td>
              <td>Salary</td>
              <td colspan="2">Remarks</td>
            </tr>
            <tr>
              <td><el-input v-model="form.phone" placeholder="Phone Number"></el-input></td>
              <td>
                <template v-if="form.attachment_name == null">
                  <el-upload
                    class="upload-demo"
                    action="string"
                    :limit="1"
                    accept=".pdf"
                    :headers="headers"
                    :http-request="uploadFile"
                    :on-remove="deleteFile"
                    :before-upload="beforeUpload"

                  >
                    <div slot="tip" class="el-upload__tip">only one and .pdf</div>
                    <el-button size="small" type="primary">Upload</el-button>
                  </el-upload>
                </template>
                <tempalte v-else>
                  <div class="updateFile">
                    <div class="item"><a :href="baseUrl + form.download_url">{{form.attachment_name}}</a></div>
                    <div class="item" @click="removeFile">x</div>
                  </div>
                </tempalte>
              </td>
              <td>
                <el-input v-model="form.salary" placeholder="Probation Salary"></el-input>
              </td>
              <td colspan="2"><el-input v-model="form.remarks" placeholder="Remarks"></el-input></td>
            </tr>
          </table>
        </div>
      </div>
    </div>

  </div>
  <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">Close</el-button>
      <el-button  type="primary" @click="tijiao">Confirm</el-button>
    </span>
</el-dialog>
</template>

<script>
import {userInfo,accountManage,deleteFile} from '@/request/api'
import axios from "axios";
export default {
  data(){
    return {
      isAdd:'Staff Information',
      dialogVisible:false,
      form:{},
      formInline:{},
      headers:{'Content-Type':'multipart/form-data'},
      baseUrl: process.env.VUE_APP_URL
    }
  },
  methods:{
    beforeUpload(file){
      var type = file.name
      type = type.split('.')[1]
      if(type != 'pdf'){
        this.$message({
          message: 'Upload files can only be in pdf format!',
          type: 'warning'
        });
        return false;
      }
    },
    //上传附件
    uploadFile(file) {
      let url="/api/account_manage/user_fujian_down"
      let fd = new FormData();
      fd.append('myFile',file.file);
      fd.append('other_name',this.form.username)
      axios({
        url:url,
			  data: fd,
        method:'post',
        }).then(res => {
        if(res.code === 200) {
          this.$message.success("Upload Success!")
        }
      })
    },
    //删除附件
    deleteFile(file,fileList){
      deleteFile({
        other_name:this.form.username
      }).then(res =>{
        if(res.code == 200){
          this.$message.success("Delete Success!")
        }
      })
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(figitle, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    tijiao(){
      accountManage({
        data:this.form
      }).then(res => {
        if(res.code == 200){
          this.dialogVisible = false
          this.$message.success('Edit Success!')
        }else {
          this.$message.error('Edit Error!')
        }
      })
    },
    handleClose (done) {
      this.dialogVisible = false
    },
    formatData(form){
      this.form = Object.assign({}, form)
      userInfo({
        other_name:form.username
      }).then(res => {
        this.form = Object.assign({},res.data)
      })
    },
    // 删除文件
    removeFile(){
      deleteFile({
        other_name:this.form.username
      }).then(res =>{
        if(res.code == 200){
          this.formatData(this.form)
          this.$message.success("Delete Success!")
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>
.updateFile{
  background-color: #eee;
  display: flex;
  justify-content: space-between;
  padding: 8px 14px 8px 18px;
  a{
    text-decoration: none;
  }
  .item:last-child{
    cursor: pointer;
  }
}
/deep/ .el-form-item__label {
  background-color: #eee;
  text-align: center;
  //width: 121px;
}
/deep/ .el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #eee;
}
/deep/ .el-dialog__body {
  padding: 10px 20px;
  color: #333;
  font-size: 15px;
  word-break: break-all;
}
.content{
  margin-top: 10px;
  margin-bottom: 10px;
  table{
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
  }
  table td{
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #999999;
  }
  table tr td:nth-child(2n+1){
    background-color: #eee;
  }
}
.tab-item{
  width: 100%;
  padding: 10px 0;
  border: 1px solid #eee;

  table{
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
  }
  table td{
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #999999;
    width: 20%;
  }
  table tr:nth-child(2n+1){
    background-color:#F2F6FC;
    height:50px;
    text-align: center;
  }
  table tr:nth-child(2n){
    background-color: #fff;
    height:50px;
    text-align: center;
  }
}

.tab-title{
  font-family: SourceHanSansSC;
  font-weight: 700;
  font-size: 20px;
  color: rgb(16, 16, 16);
  font-style: normal;
  letter-spacing: 0px;
  line-height: 30px;
  text-decoration: none;
  padding: 5px 10px;
}

</style>
